<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title th:text="${user.adminname}">个人</title>
	<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">

	<!-- Animate.css -->
	<link rel="stylesheet" th:href="@{/plugins/userInfo/css/animate.css}">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" th:href="@{/plugins/userInfo/css/icomoon.css}">
	<!-- Bootstrap  -->
	<link rel="stylesheet" th:href="@{/plugins/userInfo/css/bootstrap.css}">

	<!-- Theme style  -->
	<link rel="stylesheet" th:href="@{/plugins/userInfo/css/style.css}">

	<!-- Modernizr JS -->
	<script th:src="@{/plugins/userInfo/js/modernizr-2.6.2.min.js}"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script th:src="@{/userInfo/js/respond.min.js}"></script>
	<![endif]-->



	</head>
<body>
<!--顶部导航栏-->
<div th:replace="Currency/indexnav::indexnav(1)"></div>
<div id="page">
	<header id="fh5co-header" class="fh5co-cover js-fullheight" role="banner"  data-stellar-background-ratio="0.5">

		<div class="overlay"></div>
		<div class="container">
			<div class="row">
				<div class="col-md-8 col-md-offset-2 text-center">
					<div class="display-t js-fullheight">
						<div class="display-tc js-fullheight animate-box" data-animate-effect="fadeIn">
							<div class="profile-thumb" >
								<img th:src="${user.photo}" alt="" class="profile-thumb">
							</div>
							<h1><span th:text="${user.adminname}" th:userid="${user.id}" id = "userid">Louie Jie Mahusay</span></h1>
						</div>
					</div>
				</div>
			</div>
		</div>
	</header>

	<div id="fh5co-about" class="animate-box">
		<div class="container">
			<div class="row">
				<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
					<h2>About Me</h2>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<h2>Hello There!</h2>
					<p th:text="${user.info}">There live the blind texts far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in bookmarksgrove there live the blind texts far from the countries.</p>
					<!--<p>Far far away, behind the word mountains, Quos quia provident consequuntur culpa facere ratione maxime commodi voluptates id repellat velit eaque aspernatur expedita.
						Possimus itaque adipisci there live the blind texts from the countries Vokalia and Consonantia, there live the blind texts.
						Quos quia provident consequuntur culpa facere ratione maxime commodi voluptates id repellat velit eaque aspernatur expedita.
						Possimus itaque adipisci.</p>-->
				</div>
			</div>
		</div>
	</div>

	<div id="fh5co-skills" class="animate-box">
		<div class="container">
			<div class="row">
				<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
					<h2>Detail</h2>
				</div>
			</div>
			<div class="row row-pb-md">
				<div class="col-md-4 col-sm-6 col-xs-12 text-center">
					<div class="chart" th:data-percent="${likeNum}" >
						<span><strong>点赞</strong> <em th:text="${likeNum}">122</em></span></div>
				</div>
				<div class="col-md-4 col-sm-6 col-xs-12 text-center">
					<div class="chart" data-percent="122"><span><strong>粉丝</strong>93%</span></div>
				</div>
				<div class="col-md-4 col-sm-6 col-xs-12 text-center">
					<div class="chart" data-percent="122"><span><strong>Ta的关注</strong>90%</span></div>
				</div>

			</div>
		</div>
	</div>

	<div id="fh5co-work" >
		<div class="container">
			<div class="row animate-box">
				<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
					<h2>Blog</h2>
				</div>
			</div>
			<div class="row" id="articleList">
			</div>
			<div class="row" id="addMore">
			</div>
		</div>
	</div>

	<div class="gototop js-top">
		<a href="#" class="js-gotop"><i class="icon-arrow-up22"></i></a>
	</div>
	
	<!-- jQuery -->
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<!-- jQuery Easing -->
	<script th:src="@{/plugins/userInfo/js/jquery.easing.1.3.js}"></script>
	<!-- Bootstrap -->
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<!-- Waypoints -->
	<script th:src="@{/plugins/userInfo/js/jquery.waypoints.min.js}"></script>
	<!-- Validate JS -->
	<script th:src="@{/plugins/userInfo/js/jquery.validate.min.js}"></script>
	<!-- Stellar Parallax -->
	<script th:src="@{/plugins/userInfo/js/jquery.stellar.min.js}"></script>
	<!-- Easy PieChart -->
	<script th:src="@{/plugins/userInfo/js/jquery.easypiechart.min.js}"></script>

	<!-- Main -->
	<script th:src="@{/plugins/userInfo/js/main.js}"></script>


	<script>
		//这里自加载
		$(function () {

			//获取数据
			getPhoto(1);

		})
		var userid = $('#userid').attr("userid");
		console.log("userid:",userid);
		function getPhoto(pageNum) {

			var dates  = {"pageNum":pageNum,
						"userid":userid };
			$.ajax({
				url:"[(@{/userArticle})]",
				data:dates,
				type:"post",
				success:function (message) {
					// console.log(1);
					console.log(message);
					build_photo(message);
					// addMore(message);
					build_More(message)

				}
			})
		}




		function build_More(result) {
			if (result.extend.pageInfo.hasNextPage == false){
				//先清空，防止累加
				$("#addMore").empty();
				// $("#addMoreBtn").empty();

				var div1 = $("<div  class = \"col-md-offset-6 col-lg-offset-4col-xl-offset-4\"></div>")
				var btn = $("<p  id=\''>亲，我也是有底线的哦</p>")
				div1.append(btn)
						.appendTo("#addMore")
			}else{
				//先清空，防止累加
				$("#addMore").empty();
				var div1 = $("<div  class = \"col-md-offset-6 col-lg-offset-4col-xl-offset-4\"></div>")
				var btn = $("<button class=\"addMoreBtn\" id=\'addMoreBtn'>加载更多</button>")
				div1.append(btn)
						.appendTo("#addMore")
				$("#addMoreBtn").click(function () {
					getPhoto(result.extend.pageInfo.nextPage);
				})
			}
		}

		function build_photo(result){
			// $("#imgList ").empty();

			//获取json的list数据，即图片数据
			var articleLiat = result.extend.pageInfo.list;

			//jq的遍历
			$.each(articleLiat,function (index,item) {
				var div1 = $(" <div class=\"col-lg-4 col-md-6\"></div>");
				var div2 = $("<div class=\"blog-1\"></div>");
				var div3 = $("<div class=\"blog-photo\"></div>");
				var img = $("<img src=\"...\" alt=\"...\" style=\"width:360px;height:225px\" class='center-block' >").attr('src',item.photo);
				var div5 = $(" <div class=\"detail\"></div>");
				var h3 = $("<h3></h3>");
				var a =$("<a href=''>Selling Your Real House</a>").attr('href','/blog/article/'+item.id ).text(item.title);
				var p = $("<p></p>").append(item.content);
				var a2 = $("<a href=\"blog-single-sidebar-right.html\" class=\"read-more\">Read more</a>");

				var blog_photo_div = div3.append(img);
				var h3_div = h3.append(a)
				var detail_div =div5.append(h3_div).append(p).append(a2);
				var blog_1_div = div2.append(blog_photo_div).append(detail_div);
				var all_div = div1.append(blog_1_div).appendTo("#articleList");

				//append方法执行完成以后还是返回原来的元素
				//appendTo追加到teacher_table

			})
		}
	</script>

</div>
</body>
</html>

